<template>
	<view>
		<nav-header title="公告详情" :show-right="false">
		</nav-header>

		<view class="user-info">
			<view class="info">
				<view class="header">
					<!-- <view>
						<head-image class="img" :name="userInfo.nickName" :url="userInfo.headImageThumb"
							:size="115"></head-image>
					</view> -->
					<view class="nickname">
						<text class="text-md-Medium">创建人：{{userInfo.nickName}}</text>
						<text class="text-xs-Medium time">{{data.updateTime}}</text>
					</view>
				</view>
				<view class="content">
					<text class="text-sm-Medium">{{data.content}}</text>
				</view>
				<view class="switch" v-if="isOwner || isAdmin">
					<up-cell-group>
						<up-cell title="设为置顶">
							<template #right-icon>
								<up-switch v-model="isOnTop" activeColor="#17B26A" @change="change"></up-switch>
							</template>
						</up-cell>
						<up-cell title="固定在聊天框">
							<template #right-icon>
								<up-switch v-model="isFixedBox" activeColor="#17B26A" @change="change1"></up-switch>
							</template>
						</up-cell>
						<up-cell title="使用弹窗展示公告">
							<template #right-icon>
								<up-switch v-model="isPopNotice" activeColor="#17B26A" @change="change2"></up-switch>
							</template>
						</up-cell>
					</up-cell-group>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isOnTop: false,
				isFixedBox: false,
				isPopNotice: false,
				data: {},
				userInfo: {},
				group: [],
				annoId: null
			}
		},
		methods: {
			change(e) {
				let data = {
					id: this.annoId,
					isOnTop: this.isOnTop
				}
				this.$http({
					url: "/group/modifyGroupNotice",
					method: "POST",
					data: data
				}).then(() => {
					uni.showToast({
						title: "修改成功",
						icon: "none"
					})
				})
			},
			change1(e) {
				let data = {
					id: this.annoId,
					isFixedBox: this.isFixedBox
				}
				this.$http({
					url: "/group/modifyGroupNotice",
					method: "POST",
					data: data
				}).then(() => {
					uni.showToast({
						title: "修改成功",
						icon: "none"
					})
				})
			},
			change2(e) {
				let data = {
					id: this.annoId,
					isPopNotice: this.isPopNotice
				}
				this.$http({
					url: "/group/modifyGroupNotice",
					method: "POST",
					data: data
				}).then(() => {
					uni.showToast({
						title: "修改成功",
						icon: "none"
					})
				})
			},
			loadUserInfo(id) {
				this.$http({
					url: "/user/find/" + id,
					method: 'GET'
				}).then((user) => {
					console.log(user)
					this.userInfo = user;
				})
			},
			loadGroupInfo(id) {
				this.$http({
					url: `/group/find/${id}`,
					method: 'GET'
				}).then((group) => {
					console.log(group)
					this.group = group;

				});
			},
			isReady() {
				this.$http({
					url: `/group/readGroupNotice?noticeId=${this.annoId}`,
					method: "POST",
				}).then(() => {

				})
			},
			getData() {
				this.$http({
					url: "/group/findGroupNoticeById?id=" + this.annoId,
					method: "GET"
				}).then((data) => {
					this.loadUserInfo(data.updateBy)
					this.loadGroupInfo(data.groupId)
					this.isOnTop = data.isOnTop
					this.isFixedBox = data.isFixedBox
					this.isPopNotice = data.isPopNotice
					this.isReady()

					const date = new Date(data.updateTime);
					const formattedDate =
						`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
					data.updateTime = formattedDate

					this.data = data
				})
			}
		},
		computed: {
			isOwner() {
				return this.userStore.userInfo.id == this.group.ownerId
			},
			isAdmin() {
				if (this.group.groupAdmin) {
					return this.group.groupAdmin.includes(this.userStore.userInfo.id)
				} else {
					return false
				}
			}
		},
		onLoad(options) {
			this.annoId = options.id
			this.getData()
			// this.data=JSON.parse(options.data)
			// console.log(JSON.parse(options.data))
			// this.loadUserInfo(this.data.updateBy)
			// this.loadGroupInfo(this.data.groupId)
			// this.isOnTop=this.data.isOnTop
			// this.isFixedBox=this.data.isFixedBox
			// this.isPopNotice=this.data.isPopNotice
		},
		onUnload() {
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2];
			prevPage.$vm.handleData();
		}
	}
</script>

<style lang="scss" scoped>
	.user-info {
		width: 100%;

		.info {
			padding: 24rpx 32rpx;

			.header {
				display: flex;
				align-items: center;

				.nickname {
					display: flex;
					flex-direction: column;
					color: $gray-900;

					.time {
						color: $gray-400;
						margin-top: 10rpx;
					}
				}

				.avr-img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 5%;
				}
			}

			.content {
				margin-top: 24rpx;
				color: $gray-600;
			}

			.switch {
				:deep(.u-cell__body) {
					padding: 24rpx 0;
				}

				padding: 0;
				margin-top: 40rpx;
			}
		}
	}
</style>